<template>
  <div class="photoinfo">
    <van-panel :title="imageInfo.title" :status="`阅读${imageInfo.click}次`">
      <div v-html="imageInfo.content" class="content"></div>
      <div class="imgs-box">
        <img v-for="(item, index) in thums" :key="index" v-lazy="item.src" />
      </div>
    </van-panel>
    <Comment :id="id"></Comment>
  </div>
</template>
<script>
import Comment from "@/components/Comment";
export default {
  components: {
    Comment,
  },
  props: ["id"],
  data() {
    return {
      imageInfo: {},
      thums: [],
    };
  },
  created() {
    this.getImageInfo();
    this.getThumImages();
  },
  methods: {
    async getImageInfo() {
      const res = await this.$http.getImageInfo(this.id);
      this.imageInfo = res.data.message;
    },
    async getThumImages() {
      const res = await this.$http.getThumImages(this.id);
      this.thums = res.data.message;
    },
  },
};
</script>
<style lang="scss" scoped>
.photoinfo {
  padding: 0 10px;
  box-sizing: border-box;
  .van-cell__title {
    font-weight: 600;
    font-size: 16px;
  }
  .content {
    text-indent: 2em;
    font-size: 12px;
  }
  .imgs-box {
    display: flex;
    justify-content: space-between;
    img {
      width: 100px;
      height: 100px;
    }
  }
}
</style>
